import React from 'react';
import {connect} from 'dva';
import UserList from '../components/UserList';
import MainLayout from '../components/layouts/MainLayout';
import {Row, Col} from 'antd';
import {routerRedux} from 'dva/router';

const Users = ({dispatch, users}) => {
  function handleClick(id) {
    dispatch(routerRedux.push({
      pathname: '/user',
      query: {
        id: id
      }
    }));
  }

  function handleChange(page, pageSize) {
    dispatch({type: '/users/fetch', payload: {page:page, page_size: pageSize}});
  }

  const location = {
    pathname: '/users'
  };

  return (
    <MainLayout location={location}>
      <Row>
        <Col span={3}>

        </Col>
        <Col span={18}>
          <UserList onClick={handleClick} users={users} onChange={handleChange}/>
        </Col>
        <Col span={3}>

        </Col>
      </Row>
    </MainLayout>
  );
};

export default connect(({users}) => ({
  users,
}))(Users);
